<script setup>
import { Calendar, Search } from '@element-plus/icons-vue';
import { ref } from 'vue';
import img from '@/assets/logo.svg'
const data = ref('Chicago Value')
const desc = ref("aslkdfjalk;sdhfjlakjsdhflkahdflkajsdhflakjdshf")
const newdesc = ref("");
const arry = ref([])
// const url = ref('https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg')

// const options = ref(['苹果', '香蕉', '桃子','橘子'])
const srcList = [
  'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
  'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg',
  'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg',
  'https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg',
  'https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg',
  'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg',
  'https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg',
]
const options = ref([
  {
    id: 1,
    value: '周一',
    label: '周一'
  },
  {
    id: 2,
    value: '周二',
    label: '周二'
  },
  {
    id: 3,
    value: '周三',
    label: '周三'
  },
  {
    id: 4,
    value: '周三1',
    label: '周四'
  },
])
const fruit = ref([])
</script>

<template>
  <div>
      <div style="margin: 30px;">
        <span>
          <el-input  clearable style="width: 200px;" v-model="data" :prefix-icon="Search" placeholder="请输入内容"></el-input>{{ data }}
          <el-input :suffix-icon="Calendar" style="width: 200px;"></el-input>          
        </span>
        <el-input type="textarea" :placeholder="desc" style="width: 300px;" v-model="newdesc"></el-input>

      </div>
      <div style="margin: 30px;">

        <el-select
          clearable
          multiple
          v-model="fruit"
          placeholder="今天是周几"
          style="width: 240px"
        >
          <el-option
            v-for="item in options"
            :key="item.id"
            :label="item.label"
            :value="item.value"
          />
        </el-select><span>{{ fruit }}</span>
      </div>
      <div style="margin: 30px;">
        <el-radio-group v-model="data">
          <el-radio value="男" size="large">男</el-radio>
          <el-radio value="女" size="large">女</el-radio>
        </el-radio-group>
      </div>
      <div style="margin: 30px;">
        <el-radio-group v-model="data" size="large" >
          <el-radio-button label="New York" value="New York Value" border />
          <el-radio-button label="Washington" value="Washington Value" border/>
          <el-radio-button label="Los Angeles" value="Los Angeles Value"border />
          <el-radio-button label="Chicago" value="Chicago Value" />
        </el-radio-group>
      </div>
      <div style="margin: 30px, 0;">
        <el-checkbox-group v-model="arry">
          <el-checkbox v-for="option in options" :key="option.id" :label="option.label" :value="option.value"/>
        </el-checkbox-group>
        <span>{{ arry }}</span>
      </div>
      <div style="margin: 30px;">
        <span>
          <img src="@/assets/logo.svg" style="height: 100px;">
          <el-image :src="img"style="height: 100px;" :preview-src-list="srcList" showpage :initial-index="2"/>       
        </span>

      </div>
      <div style="margin: 30px;">
        <el-carousel>
          <el-carousel-item v-for="item in srcList">
            <img :src="item">
          </el-carousel-item>
        </el-carousel>
      </div>
  </div>
</template>